import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Button ,Form,Modal} from 'antd';
const confirm = Modal.confirm;
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import ShowList from '../../components/Show/ShowList'
import ShowForm from '../../components/Show/ShowForm'
import styles from './RadioStationShowList.less';

import docCookies from "../../common/DocCookies";

@connect(state => ({
  show: state.show,
}))
@Form.create()
export default class RadioStationShowList extends PureComponent {
  state = {
    globalRsId:docCookies.getItem("rsId") ,
    pageNo:1,
    pageSize:10,
    loading: true,          //list的loading
    loadingMore: false,     //点击加载按钮的loading
    showLoadingMore: true,  //是否显示加载更多按钮判断
    data: [],

    sysLable:[],  //系统标签

    addInputValue: '',
    modalVisible: false,
    previewVisible: false,
    previewImage: '',

    radioValue:0,
  };
  componentDidMount() {
    this.getData((response) => {
      const data = response.data.list;
      this.setState({
        loading: false,
        data: data,
      });
    });
    this.getLableData();
  }

  /**
   * 加载数据方法
   */
  getData = ( loadCallBack) => {
    var self = this;
    const { dispatch } = self.props;
    const pageNo = self.state.pageNo ;
    const pageSize = self.state.pageSize ;
    // 需要传递的参数信息
    const params = {
      rsId:self.state.globalRsId,
      pageNo: pageNo,
      pageSize: pageSize,
    };
    dispatch({
      type: 'show/listRadioStationShow',  //请求的action
      payload:params,
      callback:(response) =>{
        loadCallBack(response);
        self.setState({
          showLoadingMore:response.data.pageNo == response.data.pageCount ? false:true,
        });
      }
    });
  }
  /**
   * 获取系统标签
   * @param loadCallBack
   */
  getLableData = () => {
    var self = this;
    const { dispatch } = self.props;
    // 需要传递的参数信息
    const params = {
      type:1,
    };
    dispatch({
      type: 'show/listLableByType',  //请求的action
      payload:params,
      callback:(response) =>{
        const sysLable = response.data.list;
        self.setState({
          sysLable:sysLable,
        });
      }
    });
  }

  /**
   * 点击加载更多加载数据,注意这个setState是异步的
   */
  onLoadMore = () => {
    var self =this;
    const pageNo = this.state.pageNo +1;
    self.setState({
      pageNo:pageNo,
      loadingMore: true,
    } ,()=>{
      self.getData((response) => {
        const data = self.state.data.concat(response.data.list);
        self.setState({
          data:data,
          loadingMore: false,
        }, () => {
          window.dispatchEvent(new Event('resize'));
        });
      });
    });
  }

  /**
   * 删除电台秀
   */
  handleDelRadioStationShow = (showId,index) => {
    var self = this;
    const { dispatch } = self.props;

    confirm({
      title: '你确定要将当前电台秀删除么？',
      content: '如果您点击是，当前显示电台秀将会被删除！',
      okText: '是',
      cancelText: '否',
      onOk() {
        // 需要传递的参数信息
        const params = {
          showId:showId,
        };
        dispatch({
          type: 'show/handleDelRadioStationShow',  //请求的action
          payload:params,
          callback:(response) =>{
            const resultData = self.state.data;
            resultData.splice(index,1);
            self.setState({
              data:resultData.concat([]),
            });
          }
        });
      },
      onCancel() {
      },
    });
  }
  /**
   * 删除电台秀评论后调用的方法
   * @param showIndex
   */
  afterDelShowDiscuss = (showIndex) => {
    var self = this;
    var resultData = self.state.data;
    var commentCount = resultData[showIndex].commentCount -1;
    resultData[showIndex].commentCount = commentCount ;
    self.setState({
      data:resultData.concat([]),
    });
  }
//添加admin方法
  handleModalVisible = (flag) => {
    this.setState({
      modalVisible: !!flag,
    });
  }

  /**
   * 添加电台秀
   * */
  handleAdd = (tagValue,showTxtContentInputValue,radioValue,showAttachment,reviewPerMissionsRadioValue,pbUserName,pbUserId) => {
    var self = this;
    const { dispatch } = self.props;
    const params = {
      rsId:self.state.globalRsId,
      showTxtContent:showTxtContentInputValue,
      showAttachmentType:radioValue,
      showAttachment:JSON.stringify(showAttachment),
      showReviewPermissions:reviewPerMissionsRadioValue,
      pbUserId:pbUserId,
      pbUserName:pbUserName,
      showLables:tagValue,
    };
    dispatch({
      type: 'show/handleAddRadioStationShow',  //请求的action
      payload:params,
      callback:(response) =>{
        const newData = [response.data];
        const resultData = newData.concat(self.state.data);
        self.setState({
          data:resultData.concat([]),
          modalVisible: false,
        });
      }
    });
  }

  render() {

    const {loading,loadingMore,showLoadingMore,data,sysLable,} = this.state;
    const { modalVisible} = this.state;

    return (
      <PageHeaderLayout
      >
        <div className={styles.cardList}>
          <div >
            <Button icon="plus" type="primary" style={{marginBottom:10}}  onClick={() => this.handleModalVisible(true)}>
              发布
            </Button>
          </div>
          <ShowList
            loading={loading}
            loadingMore={loadingMore}
            showLoadingMore={showLoadingMore}
            data={data}
            onLoadMore = {() => this.onLoadMore() }
            handleDelRadioStationShow={(showId,index) => this.handleDelRadioStationShow(showId,index)}
            afterDelShowDiscuss={(showIndex)=> this.afterDelShowDiscuss(showIndex)}
          />
          <ShowForm
            modalVisible={modalVisible}
            sysLable={sysLable}
            handleAdd={(tagValue,showTxtContentInputValue,radioValue,showAttachment,reviewPerMissionsRadioValue,pbUserName,pbUserId) => this.handleAdd(tagValue,showTxtContentInputValue,radioValue,showAttachment,reviewPerMissionsRadioValue,pbUserName,pbUserId)}
            handleModalVisible={() => this.handleModalVisible()}
          />
        </div>
      </PageHeaderLayout>
    );
  }
}
